<%@ include file="../common/header.jsp" %>
<div class="content">
    <%@ include file="../common/top_nav.jsp" %>

    <div class="container mt-4">
        <h2>设备信息管理</h2>

        <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#deviceModal"
                onclick="prepareAddDevice()">新增设备</button>

        <table class="table table-bordered">
            <thead>
            <tr>
                <th>设备名称</th>
                <th>类型</th>
                <th>状态</th>
                <th>安装日期</th>
                <th>上次维护</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="device" items="${list}">
                <tr>
                    <td>${device.deviceName}</td>
                    <td>${device.deviceType}</td>
                    <td>${device.status}</td>
                    <td>${device.installationDate}</td>
                    <td>${device.lastMaintenanceDate}</td>
                    <td>
                        <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#deviceModal"
                                onclick="prepareEditDevice(${device.id})">编辑</button>
                        <a href="<c:url value='/device/delete/${device.id}'/>" class="btn btn-danger btn-sm">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<!-- 弹窗 -->
<div class="modal fade" id="deviceModal" tabindex="-1" aria-labelledby="deviceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="deviceForm" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="deviceModalLabel">设备信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="id" name="id"/>

                    <div class="mb-3">
                        <label for="deviceName" class="form-label">设备名称</label>
                        <input type="text" class="form-control" id="deviceName" name="deviceName" required>
                    </div>

                    <div class="mb-3">
                        <label for="deviceType" class="form-label">设备类型</label>
                        <input type="text" class="form-control" id="deviceType" name="deviceType" required>
                    </div>

                    <div class="mb-3">
                        <label for="status" class="form-label">状态</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="">请选择</option>
                            <option value="正常">正常</option>
                            <option value="故障">故障</option>
                            <option value="停用">停用</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="installationDate" class="form-label">安装日期</label>
                        <input type="date" class="form-control" id="installationDate" name="installationDate">
                    </div>

                    <div class="mb-3">
                        <label for="lastMaintenanceDate" class="form-label">上次维护日期</label>
                        <input type="date" class="form-control" id="lastMaintenanceDate" name="lastMaintenanceDate">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">保存</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<%@ include file="../common/footer.jsp" %>
<script>
    function prepareAddDevice() {
        document.getElementById("deviceModalLabel").innerText = "新增设备";
        document.getElementById("deviceForm").action = "<c:url value='/device/add'/>";
        document.getElementById("id").value = "";
        document.getElementById("deviceName").value = "";
        document.getElementById("deviceType").value = "";
        document.getElementById("status").value = "";
        document.getElementById("installationDate").value = "";
        document.getElementById("lastMaintenanceDate").value = "";
    }

    function prepareEditDevice(id) {
        fetch("<c:url value='/device/get/'/>" + id, {
            headers: {
                "Accept": "application/json"
            }
        })
            .then(response => response.json())
            .then(data => {
                document.getElementById("deviceModalLabel").innerText = "编辑设备";
                document.getElementById("deviceForm").action = "<c:url value='/device/update'/>";
                document.getElementById("id").value = data.id;
                document.getElementById("deviceName").value = data.deviceName;
                document.getElementById("deviceType").value = data.deviceType;
                document.getElementById("status").value = data.status;
                document.getElementById("installationDate").value = data.installationDate;
                document.getElementById("lastMaintenanceDate").value = data.lastMaintenanceDate;
            });
    }
</script>
